<template>
  <view class="page-view page-avtivity">
    <!-- 菜单 -->
    <view class="page-header ui-1px-b">
      <image class="avtivity-header--image" src="/static/images/activity/news.jpg" />
    </view>
    <uiScroll
      class="page-scroll"
      top="348rpx"
      ref="mescrollRef"
      @init="mescrollInit"
      :up="upOption"
      :down="downOption"
      @up="loadOrderListData"
    >
      <navigator :url="`/pages/activity/detail/index?id=${item.activityId}`" class="activity-container" v-for="item in list" :key="item.activityId">
        <view class="activity-box ui-flex flex--vcenter">
          <view class="activity-image">
            <image class="activity-image--image" :src="item.activityPic" />
          </view>
          <view class="activity-content ui-flex flex--column flex--space-between">
            <view class="activity-content--title ">
              <view class="ui-ellipsis--l3">{{item.activityName}}</view>
            </view>
            <view class="activity-content--footer ui-txt">{{item.createTime | date_format('YYYY年M月D日 H:m')}}</view>
          </view>
        </view>
      </navigator>
    </uiScroll>
  </view>
</template>

<script>
import uiScroll from "@/components/base/scroll/mescroll-body";
import uiScrollMixins from "@/components/base/scroll/mescroll-mixins.js";
import { selectActivityByPage } from "api/order/order.js";
import uiTabs from "@/components/base/tabs/index";
import uiTabsItem from "@/components/base/tabs-item/index";
import { url } from "@/utils/url.js";

export default {
  name: "orderManagePage",
  components: {
    uiScroll,
    uiTabs,
    uiTabsItem
  },
  mixins: [uiScrollMixins],
  data() {
    return {
      // 下拉刷新的常用配置
      downOption: {
        use: false, // 是否启用下拉刷新; 默认true
        auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
        native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
      },
      // 上拉加载的常用配置
      upOption: {
        use: true, // 是否启用上拉加载; 默认true
        auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        textNoMore: "没有更多数据",
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 5, // 每页数据的数量,默认10
          totalPage: 1
        },
        empty: {
          tip: "暂无相关数据"
        }
      },
      // 当前页面查询的参数
      activeIndex: 1,
      list: []
    };
  },
  created() {
    // this.loadRecommended();
  },

  methods: {
    loadOrderListData(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      var params = {
        currentPage: page.num,
        pageNumber: pageSize
      };
      var _this = this;
      selectActivityByPage(params).then(({ respCode, respMsg, result }) => {
        this.isloading = false;
        if (respCode !== "0") {
          // 加载失败
          this.$toast.fail(respMsg);
          return;
        }
        if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
        this.list = this.list.concat(result.list); //追加新数据
        this.mescroll.endByPage(this.list.length, result.page.totalPage);
      });
    },

    handleChangeTabs() {
      this.list = [];
      this.upOption.page.num = 0;
      this.loadOrderListData(this.upOption.page);
    }
  }
};
</script>

<style scoped lang="scss" >
.page-avtivity {

  .page-header {
    position: absolute;
    top: 0;
    left: 0;
    padding: 30rpx;
    .avtivity-header--image {
      width: 690rpx;
      height: 288rpx;
      border-radius: 10rpx;
    }
  }

  >>> .activity-container {
    padding: 30rpx;
    .activity-image {
      flex: 0 0 280rpx;
      .activity-image--image {
        width: 280rpx;
        height: 187rpx;
      }
    }

    .activity-content {
      flex: 1;
      padding: 10rpx 20rpx;
      height: 187rpx;
      box-sizing: border-box;
      align-items: flex-start;
      overflow: hidden;
      .activity-content--title {
        flex: 0 0 143rpx;
        font-size: 32rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40rpx;
        color: #2c2c35;
        height: 143rpx;
        overflow: hidden;
      }
      .activity-content--footer {
        flex: 0 0 24rpx;
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40rpx;
        letter-spacing: 0px;
        color: #aeafc0;
      }
    }
  }
}

>>> .page-scroll {
  padding-top: 98upx;
}
</style>
